<template>
	<div>
		<div class="">
			<div class="bgff">
				<div class="clear plr20 ptb10">
					<span class="fl fz16">添加资源 &gt; <em class="fz14">自媒体资源</em></span>
					<a class="fr layui-btn layui-btn-sm layui-btn-normal khb-btn" href="javascript:;" @click="goBack">返回</a>
				</div>
				<div class="khb-tips fz14 mlr20">
					<div>提示1：资源提交后会在一个工作日审核,审核通过后通过可接单。</div>
					<div>提示2：如有如有疑问，请联系您的媒介、客户经理。</div>
				</div>
				<el-container class="container">

					<!--ruleForm -->
					<el-form :model="dto" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="资源logo" prop="logo">
							<el-upload class="avatar-uploader" :action="this.$glo.uploadUrl" :accept="'image/*'" name="files"
							 :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :on-progress="handleProgress"
							 :before-upload="beforeAvatarUpload">
								<img v-if="dto.logo" :src="dto.logo" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>

						<el-form-item label="资源名称" prop="name">
							<div class="inputw50">
								<el-input class="" v-model="dto.name"></el-input>
							</div>
						</el-form-item>
						<el-form-item label="资源摘要" prop="summary">
							<div class="inputw50">
								<el-input v-model="dto.summary"></el-input>
							</div>
						</el-form-item>

						<el-form-item label="产品标签" prop="productLabes">
							<el-checkbox-group v-model="dto.productLabes">
								<el-checkbox label="1">最新资源</el-checkbox>
								<el-checkbox label="2">急速处理</el-checkbox>
								<el-checkbox label="3">热门资源</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						
						<el-form-item label="平台分类" prop="platformType">
							<el-checkbox-group v-model="dto.platformType">
								<el-checkbox v-for="(item,index) in platformTypeList" :label="(index+1)" :key="item">{{item}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						
						<el-form-item label="频道分类" prop="channelTypes">
							<el-checkbox-group v-model="dto.channelTypes">
								<el-checkbox v-for="(item,index) in channelTypesList" :label="(index+1)" :key="item">{{item}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						
						<el-form-item label="特殊行业">
							<el-checkbox-group v-model="dto.specialIndustrys">
								<el-checkbox v-for="(item,index) in specialIndustrysList" :label="(index+1)" :key="item">{{item}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>

						<el-form-item label="标题字数" prop="titleNum">
							<el-input-number v-model="dto.titleNum"  :min="1" :max="10" label="描述文字"></el-input-number>
						</el-form-item>

						<el-form-item label="官方推荐" >
							<el-select v-model="dto.officalRecommend " placeholder="请选择入口级别">
								<el-option label="是" value="1">是</el-option>
								<el-option label="否" value="0">否</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="接稿时间" prop="receiveStartTime">
							<el-select v-model="dto.receiveStartTime" placeholder="请选择接稿时间">
								<el-option label="周一" value="1">周一</el-option>
								<el-option label="周二" value="2">周二</el-option>
								<el-option label="周三" value="3">周三</el-option>
								<el-option label="周四" value="4">周四</el-option>
								<el-option label="周五" value="5">周五</el-option>
								<el-option label="周六" value="6">周六</el-option>
								<el-option label="周日" value="7">周日</el-option>
							</el-select>
							至 
							<el-select v-model="dto.receiveEndTime" prop="receiveEndTime" placeholder="请选择接稿时间">
								<el-option label="周一" value="1">周一</el-option>
								<el-option label="周二" value="2">周二</el-option>
								<el-option label="周三" value="3">周三</el-option>
								<el-option label="周四" value="4">周四</el-option>
								<el-option label="周五" value="5">周五</el-option>
								<el-option label="周六" value="6">周六</el-option>
								<el-option label="周日" value="7">周日</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="出稿时间" prop="publishTime">
							<el-input-number v-model="dto.publishTime"  :min="1" label="描述文字"></el-input-number>
							<span style="margin-right: 20px;"></span>
							<el-select v-model="dto.publishTimeUnit" prop="publishTimeUnit" placeholder="请选择需要来源">
								<el-option label="小时" value="1">小时</el-option>
								<el-option label="天" value="2">天</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="平均时间" prop="averageTime">
							<el-input-number v-model="dto.averageTime" :min="1" label="描述文字"></el-input-number>
						</el-form-item>
						
						
						<el-form-item label="粉丝数" prop="fanNum">
							<el-input-number v-model="dto.fanNum" :min="0" label="描述文字"></el-input-number> 万
						</el-form-item>
						 
						<el-form-item label="平均阅读数" prop="averageNum">
							<el-input-number v-model="dto.averageNum" :min="0" label="描述文字"></el-input-number> 万
						</el-form-item>
						
						
						<el-form-item label="案例链接" prop="caseLink">
							<div class="inputw50">
								<el-input v-model="dto.caseLink" placeholder="请输入案例链接"></el-input>
							</div>
						</el-form-item>

						<el-form-item label="备注说明" prop="remarkDesc">
							<div class="inputw50">
								<el-input type="textarea" placeholder="请输入内容" v-model="dto.remarkDesc" maxlength="999" show-word-limit>
								</el-input>
							</div>
						</el-form-item>
						
						<el-form-item label="认证类型" prop="authType">
							<el-radio-group v-model="dto.authType">
								<el-radio label="1">个人认证</el-radio>
								<el-radio label="2">企业认证</el-radio>
								<el-radio label="3">一手认证</el-radio>
								<el-radio label="3">独家认证</el-radio>
							</el-radio-group>
						</el-form-item>
						
						<el-form-item label="开通城市">
							<div class="inputw50">
								<el-input v-model="dto.openCity" placeholder="请输入开通城市"></el-input>
							</div>
						</el-form-item>
						
						<el-form-item label="上下架" prop="upUnderShelf">
							<el-radio-group v-model="dto.upUnderShelf">
								<el-radio disabled label="0">下架</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="基本价格" prop="price">
							<el-input-number v-model="dto.price" :min="0" label="价格"></el-input-number> 元
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
						</el-form-item>
					</el-form>

				</el-container>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '',
				dto: {
					authType: "", //认证类型,1:个人认证;2:企业认证;3:一手认证;4:独家认证 ,
					averageNum :'',//平均阅读数
					averageTime: "", //平均时间 ,
					caseLink: "", //案例链接 ,
					channelTypes: [], //频道分类,
					fanNum :'',//粉丝数
					id: "", //资源id
					logo: '', //资源logo
					name: '', //资源名称
					officalRecommend:'',//官方推荐 0:否;1:是; ,
					openCity: "", //开通城市,存城市编码,多个以逗号分隔 ,
					openCityStr :"",//开通城市文本
					platformType:[],//平台分类
					price:'',// 价格 ,
					productLabes: [], // 产品标签,1:最新资源;2:急速处理;3:热门资源，多个以逗号分隔 ,
					publishTime: "", // 出稿时间 ,1-7
					publishTimeUnit: "", // 出稿时间单位,1:小时;2:天; ,
					receiveStartTime :'',//接稿开始时间,1-7:周一到周日 ,
					receiveEndTime :'',//接稿结束时间,1-7:周一到周日 ,
					remarkDesc: "", // 备注说明
					specialIndustrys: [], //特殊行业,1:P2P;2:金融;3:微商;4:健康;5:加盟;6:留学;7:无;多个以逗号分隔 ,
					summary: "", // 资源摘要 
					titleNum: "", //标题字数 ,
					upUnderShelf: "0", //上下架,0:待上架;1:已上架；3:已下架（写死传0） ,
					
				},
				//平台分类数组
				platformTypeList :[
					'百家号','今日头条','东方头条','搜狐网','新浪网','网易号','一点资讯','UC头条','腾讯号',
					'凤凰号','知乎号','豆瓣','简书','东方财富号','中金在线号','趣头条','天天快报','其他'
				],
				//频道分类数组
				channelTypesList: ['新闻', '财经', 'IT', '科技', '娱乐', '旅游', '教育', '房产', '家居', '汽车', '女性',
					'时尚', '美容', '母婴育儿', '健康', '艺术', '家电数码', '游戏动漫', '体育', '资讯', '生活', '食品', '文化环保',
					'公益', '法律', '门户', '报业', '区块链', '工业贸易'
				],
				//收录参考数组
				inclusionReferenceList: ['新闻源', '网页收录', '百度收录', '包网页收录', '包新闻源收录', '不包收录'],
				//特殊行业数组
				specialIndustrysList: ['P2P', '金融', '微商', '健康', '加盟', '留学', '无'],
				//综合门户数组
				integratedPortalList: [
					'新浪网', '网易', '搜狐网', '腾讯网', '凤凰网', '中华网', '中国网', '环球网', '人民网', '新华网',
					'中国新闻网(中新网)', '光明网', '中国日报网', '国际在线', '中国青年网', '北青网', '慧聪网', '大众网',
					'央广网(中国广播网)', '中国经济网', '千龙网', '中青在线'
				],
				rules: {
					logo: [{
						required: true,
						message: '请上传资源LOGO'
					}],
					name: [{
							required: true,
							message: '请输入资源名称',
							trigger: 'blur'
						},
						{
							max: 50,
							message: '长度在50个字符之内',
							trigger: 'blur'
						}
					],
					summary: [{
						max: 255,
						message: '长度在50个字符之内',
						trigger: 'blur'
					}],
					productLabes: [{
						type: 'array',
						required: true,
						message: '请至少选择一个活动性质',
						trigger: 'change'
					}],
					receiveStartTime: [{
						required: true,
						message: '接稿时间',
						trigger: 'change'
					}],
					receiveEndTime: [{
						required: true,
						message: '接稿时间',
						trigger: 'change'
					}],
					channelTypes: [{
						type: 'array',
						required: true,
						message: '请至少选择一个频道分类',
						trigger: 'change'
					}],
					titleNum: [{
						required: true,
						message: '请输入标题字数',
						trigger: 'blur'
					}],
					publishTime: [{
						required: true,
						message: '请输入填写最快出稿时间',
						trigger: 'blur'
					}, ],
					publishTimeUnit: [{
						required: true,
						message: '请选择出稿时间单位',
						trigger: 'change'
					}, ],
					caseLink: [{
						required: true,
						message: '请输入案例链接',
						trigger: 'blur'
					}, ],
					authType: [{
						required: true,
						message: '请选择需要来源',
						trigger: 'change'
					}, ],
					upUnderShelf: [{
						required: true
					}],
					remarkDesc: [{
						required: true,
						message: '请输入备注说明',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur'
					}],
					platformType: [{
							type: 'array',
							required: true,
							message: '请至少选择一个网站类型',
							trigger: 'change'
					}],
					fanNum :[{
							required: true,
							message: '请输入粉丝数',
							trigger: 'blur'
					}],
					averageNum:[{
							required: true,
							message: '请输入平均阅读数',
							trigger: 'blur'
						}
					],
				}
			}
		},
		created() {},
		methods: {
			goBack(){
				this.$router.go(-1);
			},
			//图片上传成功返回
			handleAvatarSuccess(res, file) {
				//this.imageUrl = URL.createObjectURL(file.raw);
				this.imageUrl = res[0].url;
				this.dto.logo = res[0].url;
			},
			//图片上传失败返回
			handleAvatarError(err, file) {
				console.log(err)
			},
			//上传时执行loading事件
			handleProgress(event, file, fileList) {
				this.loading = true; 
			},
			//上传之前判断
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/*';
				const isLt2M = file.size / 1024 / 1024 < 2;
				// if (!isJPG) {
				//   this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				//isJPG&&
				return isLt2M;
			},
			//提交
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.editSoftText();
					} else {
						console.log('error submit!!');
						this.$message("请确认填写是否正确");
						return false;
					}
				});
			},
			findSoftText(){
				
			},
			editSoftText(){
				// console.log(this.dto)
				let dto = this.dto;
				let datas = {
					// access_token:this.$store.state.accToken,
					authType: dto.authType, 
					averageNum :dto.averageNum,
					averageTime: dto.averageTime, 
					caseLink: dto.caseLink, 
					channelTypes: dto.channelTypes.join(), 
					fanNum :dto.fanNum,
					id: dto.id?dto.id:'',
					logo: dto.logo, 
					name: dto.name,
					officalRecommend: dto.officalRecommend,
					openCity: '050020',	//dto.openCity, 测试写死
					openCityStr:'广州',
					platformType:dto.platformType.join(),
					price:dto.price,
					productLabes: dto.productLabes.join(),
					publishTime: dto.publishTime,
					publishTimeUnit: dto.publishTimeUnit,
					remarkDesc: dto.remarkDesc, 
					specialIndustrys: dto.specialIndustrys.join(), 
					summary: dto.summary, 
					titleNum: dto.titleNum,
					upUnderShelf: "0",
					receiveStartTime :dto.receiveStartTime,
					receiveEndTime :dto.receiveEndTime,
				}
				console.log(datas)
				console.log(JSON.stringify(datas))
				this.$api.req.saveSelfMedia(datas)
				.then(res=>{
					console.log(res);
					this.$message(res.data)
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	.container {
		padding-top: 20px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.inputw50 {
		width: 50%;
	}
</style>
